<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #div1{margin-left: 500px;}
        #div1 div{ width:307px; height:300px; border:1px #000 solid; display:none;}
        .active{ background:red;}
        input{width: 100px;height: 50px;border: none;}
    </style>
    <script>
        window.onload = function(){
            var t1 = new Tab();
            t1.init();
        };
        function Tab(){
            this.oParent = document.getElementById('div1');
            this.aInput = this.oParent.getElementsByTagName('input');
            this.aDiv = this.oParent.getElementsByTagName('div');
        }
        Tab.prototype.init = function(){
            var This = this;
            for(var i=0;i<this.aInput.length;i++){
                This.aInput[i].index = i;
                This.aInput[i].onclick = function(){
                    This.change(this);
                };
            }
        };
        Tab.prototype.change = function(obj){
            for(var i=0;i<this.aInput.length;i++){
                this.aInput[i].className = '';
                this.aDiv[i].style.display = 'none';
            }
            obj.className = 'active';
            this.aDiv[obj.index].style.display = 'block';
        };
    </script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>